<template>
    <view class="profile-container">
        <!-- 头像和昵称 -->
        <u-cell-group>
            <u-cell title="头像">
                <u-avatar slot="value" class="avatar" :src="userInfo.icon" size="80">
                </u-avatar>
            </u-cell>
            <u-cell title="昵称" :value="userInfo.nickName"></u-cell>
        </u-cell-group>

        <!-- 其他信息 -->
        <u-cell-group>
            <u-cell title="用户名" :value="userInfo.userName"></u-cell>
            <u-cell title="手机号" :value="userInfo.phone"></u-cell>
            <u-cell title="性别" :value="genderText"></u-cell>
            <u-cell title="注册时间" :value="formattedCreateTime"></u-cell>
            <u-cell icon="/static/wechat.svg" title="微信">
                <view slot="value" class="u-slot-value" style="color: #2095dd;">
                    <text class="u-cell-text" v-if="userInfo.openid" @click="wxUnBind">解绑</text>
                    <text class="u-cell-text" v-else @click="wxBind">绑定</text>
                </view>
            </u-cell>
        </u-cell-group>
    </view>
</template>

<script>
    import {
        User
    } from '@/utils';
    import {
        authApi
    } from '../../api';

    export default {
        data() {
            return {
                userInfo: {},
                isWxBind: true,
            };
        },
        computed: {
            // 性别文本转换
            genderText() {
                return this.userInfo.gender === 1 ? '男' : '女';
            },
            // 格式化创建时间
            formattedCreateTime() {
                const date = new Date(this.userInfo.createTime);
                return date.toLocaleString(); // 根据需要格式化时间
            }
        },
        methods: {
            async refreshUserInfo(userId) {
                const {
                    code,
                    data
                } = await authApi.getUserInfoById(userId);
                if (code == 200) {
                    User.set(data);
                    this.userInfo = User.get();
                }
            },
            async wxUnBind() {
                uni.showLoading({
                    title: "请稍后"
                })
                try {
                    const {
                        code,
                        data
                    } = await authApi.wxUnBind(this.userInfo.userId);
                    if (code == 200) {
                        this.refreshUserInfo(this.userInfo.userId);
                        uni.showToast({
                            title: '解绑成功'
                        })
                    }
                } finally {
                    uni.hideLoading();
                }
                return;
            },
            async wxBind() {
                uni.showLoading({
                    title: "请稍后"
                })
                try {
                    let loginRes = await uni.login();
                    loginRes = loginRes[1];
                    const {
                        code,
                        data
                    } = await authApi.wxBind(this.userInfo.userId, loginRes.code);
                    if (code == 200) {
                        this.refreshUserInfo(this.userInfo.userId);
                        uni.showToast({
                            title: '绑定成功'
                        })
                    }
                } finally {
                    uni.hideLoading();
                }
            }
        },
        onLoad() {
            // 获取用户信息
            this.userInfo = User.get();
        },
    };
</script>

<style scoped>
    .profile-container {
        padding: 20rpx;
    }

    .avatar {
        width: 120rpx;
        height: 120rpx;
    }
</style>